<template>
    <div>
        <p class="shop_list">
            <span>店铺列表</span>
            <el-button type="primary" @click="isDialog = true"> + 添加店铺</el-button>
        </p>
        <ul>
            <li class="list_item" v-for="(item, index) in shopList" :key="item.id">
                {{ index + 1 }} . {{ item.shopName }}
                <span style="margin-left: 30px">( {{ item.shopId }} )</span>
            </li>
        </ul>

        <el-dialog title="添加店铺" v-model="isDialog" width="30%">
            <el-form :model="form" label-width="100px" :rules="rules" ref="formRef">
                <el-form-item label="店铺名称" prop="shopName">
                    <el-input v-model="form.shopName"></el-input>
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel">取消</el-button>
                    <el-button type="primary" @click="confirm"> 确定 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { getShopList } from '../../../api/service'
import { add_shop } from '../../../api/home'
const isDialog = ref(false)
const formRef = ref(null)

const shopList = ref([])
const form = reactive({
    shopName: ''
})

const init = async () => {
    const { data } = await getShopList()
    shopList.value = data.data || []
}
init()

const rules = reactive({
    shopName: [{ required: true, message: '请输入店铺名称', trigger: 'blur' }]
})

const cancel = () => {
    isDialog.value = false
    formRef.resetFields()
}

const confirm = () => {
    formRef.value.validate(async (valid) => {
        if (valid) {
            const res = await add_shop(form)
            if (res.status !== 200) {
                return ElMessage({
                    message: '添加失败',
                    type: 'error'
                })
            }
            isDialog.value = false
            init()
            ElMessage({
                message: '添加成功',
                type: 'success'
            })
        }
    })
}
</script>

<style lang="scss" scoped>
.shop_list {
    font-size: 20px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
    display: flex;
    justify-content: space-between;
}
.list_item {
    margin-top: 20px;
    line-height: 20px;
    font-size: 18px;
    padding: 0 0 0 100px;
}
</style>
